<template>
  <div class="content">
    <!-- 头部搜索 -->
    <van-sticky>
      <div class="header-search">
        <div class="header1" @click="toSearch">
          <div class="search-font">
            <van-icon class="search" name="search" size="14" olor="#666666" />
            <span>搜索商品</span>
          </div>
        </div>
      </div>
    </van-sticky>

    <!-- --------- -->
    <!-- 中部内容区 -->
    <!-- 父 -->
    <div class="central">
      <!-- 左边 -->
      <div class="central-left">
        <div class="categories">
          <ul v-for="itemLeft in categoryL1List" :key="itemLeft.id">
            <li
              class="item"
              :class="{ active: isCheck === itemLeft.id }"
              @click="handleCategoryContent(itemLeft.id)"
            >
              <!-- <div class="box active"></div> -->
              {{ itemLeft.name }}
            </li>
            <!-- <li class="item active"><a href="##">家居生活</a></li> -->
          </ul>
        </div>
      </div>
      <!-- 右边 -->
      <div class="central-right">
        <div
          class="headerImg"
          v-for="bigImg in currentCategory.bannerList"
          :key="bigImg.id"
        >
          <a :href="bigImg.targetUrl"><img :src="bigImg.picUrl" alt="" /></a>
        </div>
        <div
          class="skuInfo"
          v-for="category in categoryGroupList"
          :key="category.id"
        >
          <div class="sku-Categories">{{ category.name }}</div>
          <div class="sku-SmallImg">
            <div
              class="text-img"
              v-for="samllImg in category.categoryList"
              :key="samllImg.id"
              @click="toCategoryList(samllImg.superCategoryId, samllImg.id)"
            >
              <div class="SmallImg">
                <img :src="samllImg.wapBannerUrl" alt="" />
              </div>
              <div class="textItem">{{ samllImg.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部标签栏 -->
    <treeSelect></treeSelect>
  </div>
</template>

<script>
import { reqceshi, reqCategorycontent } from "@/api";
import treeSelect from "@/components/treeSelect.vue";
export default {
  name: "Category",
  components: {
    treeSelect,
  },
  data() {
    return {
      categoryL1List: [], //分类首页右侧列表
      categoryGroupList: [], //分类右侧列表
      superCategoryId: "", //跳转页面id
      categoryL2List: [], // 首页分类列表2
      currentCategory: {},
      isCheck: 0, //左侧边框是否选中
    };
  },
  // 声明周期
  mounted() {
    // 进入页面挂载请求
    this.getreqceshi();
    this.handleCategoryContent(11);
  },
  methods: {
    // 获取首页左侧列表信息
    async getreqceshi() {
      let result = await reqceshi("");
      this.categoryL1List = result.data.categoryL1List;
    },
    // 点击获取分类首页右侧内容数据
    async handleCategoryContent(contentId) {
      let result = await reqCategorycontent(contentId);
      // console.log(result);
      this.categoryGroupList = result.data.categoryGroupList;
      this.currentCategory = result.data.currentCategory;
      this.isCheck = contentId;
    },
    // 点击跳转页面
    toCategoryList(categoryId, subCategoryId) {
      // console.log(categoryId,subCategoryId)
      this.$router.push({
        path: "/categoryList",
        query: { categoryId, subCategoryId },
      });
    },

    //点击跳转搜索页面
    toSearch() {
      this.$router.push({ path: "/search" });
    },
  },
  
};
</script>

<style lang="less" scoped>
.content {
  .header-search {
    width: 100%;
    height: 44px;
    background-color: #ffffff;
    border-bottom: 2px solid #ededed;
    position: relative;
    .header1 {
      width: 345px;
      height: 28px;
      position: absolute;
      top: 8px;
      left: 15px;
      border-radius: 10px;
      .search-font {
        border-radius: 6px;
        background-color: #ededed;
        display: flex;
        justify-content: center;
        .search {
          line-height: 28px;
          text-align: center;
          padding-right: 3px;
        }
        span {
          font-size: 14px;
          line-height: 28px;
          text-align: center;
          color: #666666;
        }
      }
    }
  }

  .central {
    width: 100%;
    height: 573px;
    border-bottom: 2px solid #dad8d8;
    background-color: #ffffff;
    display: flex;
    .central-left {
      width: 22%;
      height: 100%;
      border-right: 1px solid #dad8d8;
      overflow: auto;
      white-space: normal;
      word-break: break-all;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      .categories {
        width: 100%;
        height: 25px;
        ul {
          .item {
            box-sizing: border-box;
            width: 100%;
            font-size: 14px;
            line-height: 25px;
            text-align: center;
            margin-top: 20px;
            position: relative;
            border-left: 5px solid #fff;
            &.active {
              color: #ab2b2b;
              border-left-color: #ab2b2b;
            }
          }
        }
      }
    }
    //隐藏滚动条
    .central-left::-webkit-scrollbar {
      display: none;
    }
    .central-right {
      width: 78%;
      height: 100%;
      overflow: auto;
      white-space: normal;
      word-break: break-all;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;

      .headerImg {
        margin: 15px auto;
        width: 90%;
        height: 96px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .skuInfo {
        margin: 0 auto;
        width: 90%;
        // height: 264px;
        .sku-Categories {
          width: 100%;
          height: 26px;
          line-height: 26px;
          font-size: 14px;
          font-weight: 600;
          color: rgb(8, 8, 8);
          border-bottom: 1px solid #dad8d8;
          margin-bottom: 12px;
        }
        .sku-SmallImg {
          width: 100%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          .text-img {
            // float: left;
            width: 72px;
            height: 100%;
            margin-right: 11px;
            .SmallImg {
              width: 72px;
              height: 72px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .textItem {
              width: 72px;
              height: 36px;
              font-size: 5px;
              text-align: center;
              // background-color:rgb(50, 233, 26);
            }
          }
        }
      }
    }
    //隐藏滚动条
    .central-right::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>